
<template>
    <div class="home-box">
        <router-view></router-view>
        <van-tabbar v-model="active">
            <van-tabbar-item>
                <span>首页</span>
                <template #icon="props">
                    <van-icon :name="props.active ? 'wap-home' : 'wap-home-o'"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>分类</span>
                <template #icon="props">
                    <van-icon :name="props.active ? 'coupon' : 'coupon-o'"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>视频</span>
                <template #icon="props">
                    <van-icon :name="props.active ? 'video' : 'video-o'"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>购物车</span>
                <template #icon="props">
                    <van-icon :name="props.active ? 'shopping-cart' : 'shopping-cart-o'"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>我的</span>
                <template #icon="props">
                    <van-icon :name="props.active ? 'manager' : 'manager-o'"/>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                active: 0
            }
        },
        watch: {
            active: {
                immediate: true,
                deep: true,
                handler(val) {
                    this.$router.push(['/index/home', '/index/type','/index/video', '/index/cart', '/index/me'][val])
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .home-box {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        > article {
            display: block;
            position: relative;
            height: calc(100% - 46px - 50px);
            overflow-x: hidden;
        }
    }


</style>